<!DOCTYPE html>
<html>
<head>
    <title>Upload Excel Files</title>
    <style>
        body { max-width: 600px; margin: 20px auto; padding: 20px; }
        .container { background: #f5f5f5; padding: 20px; border-radius: 8px; }
        input { width: 100%; margin: 10px 0; }
        button { background: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #45a049; }
        .result { margin-top: 20px; padding: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Upload Excel Files</h1>
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" name="files" multiple accept=".xls,.xlsx">
            <button type="submit">Upload Files</button>
        </form>
        <div class="result" id="result"></div>
    </div>

    <script>
        const form = document.getElementById('uploadForm');
        const resultDiv = document.getElementById('result');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(form);
            
            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                resultDiv.innerHTML = `
                    <div style="color: green;">${data.message}</div>
                    <div>Total records: ${data.totalRecords}</div>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<div style="color: red;">Upload failed: ${error.message}</div>`;
            }
        });
    </script>
</body>
</html>